<template>
  <contentModel
    v-if="modelValue"
    :has-footer="false"
    title="绑定预到货"
    @close="cancel"
  >
    <query-page
      v-model:selectedKeys="selectedKeys"
      :form-component-config="formComponentConfig"
      :form-render-config="formRenderConfig"
      :form-render-keys="formRenderKeys"
      :table-component-config="tableComponentConfig"
      :table-render-config="tableRenderConfig"
      :table-render-keys="tableRenderKeys"
      :loading="isLoading"
      :data="renderData"
      :total="tableTotal"
      height="100%"
      row-selection-type="radio"
      @selection-change="selectionChange"
      @query-data="getData"
    >
    </query-page>
    <template #header-right>
      <a-space>
        <a-button type="outline" @click="handleCancel(record, rowIndex)"
          >取消</a-button
        >
        <a-button
          type="primary"
          :loading="loading"
          @click="handleSubmit(record, rowIndex)"
          >保存</a-button
        >
      </a-space>
    </template>
  </contentModel>
</template>

<script lang="ts" setup>
  import { defineAsyncComponent, inject, ref, toRefs } from 'vue';
  import queryPage from '@/common/components/query-page/index.vue';
  import { getPmsReceiveDetailPage } from '@/api/purchaseArrival/arrivalRegistration';
  import { bindPmsDetailAndBatch } from '@/api/purchaseArrival/threeCodeVerification';
  import { Message } from '@arco-design/web-vue';
  import {
    formComponentConfig,
    formRenderConfig,
  } from '../moduleCommon/formComp/baseFormConfig';
  import {
    tableRenderConfig,
    tableComponentConfig,
  } from '../moduleCommon/tableComp/baseTableConfig';

  const contentModel = defineAsyncComponent(
    () => import('@/common/components/content-model/index.vue')
  );
  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false,
    },
    // eslint-disable-next-line vue/require-prop-types
    selectId: {},
  });
  const emits = defineEmits(['update:modelValue', 'fetchData']);
  const cancel = () => {
    emits('update:modelValue', false);
  };
  const { selectId } = toRefs(props);
  // 当前页面要渲染的查询条件
  const formRenderKeys = [
    'billNo',
    'mdsVendorCode',
    'mdsVendorName',
    'orderNo1',
    'sysOrderNo',
  ];
  // 当前表格要渲染哪些值
  const tableRenderKeys = [
    'secretLevel',
    'orderNo2',
    'sysOrderNo',
    'mdsVendorName',
    'drawingCode1', // 图号
    'mdsItemCode',
    'mdsItemName1',
    'marque1',
    'techCondition', // 技术条件
    'statusIdentificationNo',
    'mdsCategoryLv1Name1',
    'invDeliverQty',
    'invMdsUnitDesc',
    'pmsDeliverQty',
    'invoiceNo',
    'mdsCustomerTypeName',
    'itemManufactureFactoryName',
    'dealerName',
    'editUserName',
    'editDate',
    'pmsReceiveDate',
    'checkTimeType',
    'mdsUnitRate',
  ];

  const isLoading = ref(true);
  const tableTotal = ref(0);
  const renderData = ref<any[]>([]);
  const selectedKeys = ref([]);
  const selectBatchRow = inject('selectBatchRow');

  const getData = async (queryInfo: object) => {
    queryInfo = {
      ...queryInfo,
      mdsItemCode: selectBatchRow.value.mdsItemCode,
      mdsItemType: '2',
      batchFlag: '0',
    };
    renderData.value = [];
    isLoading.value = true;
    const { data } = await getPmsReceiveDetailPage(queryInfo);
    renderData.value = data.list;
    tableTotal.value = data.total;
    isLoading.value = false;
  };

  // const showConsole = (rowData: object, index: number) => {
  //   console.log('rowData', rowData);
  //   console.log('index', index);
  // };
  const handleSubmit = async () => {
    if (!selectedKeys.value.length) {
      Message.info({
        content: '请选择预到货信息！',
        duration: 5 * 1000,
      });
      return;
    }
    const form = {
      receiveDetailBatchIdList: [selectId?.value],
      receiveDetailId: selectedKeys.value[0],
    };
    await bindPmsDetailAndBatch(form);
    Message.success({
      content: '绑定成功！',
      duration: 5 * 1000,
    });
    emits('fetchData');
    cancel();
  };
  const handleCancel = () => {
    cancel();
  };
</script>

<style lang="less" scoped>
  @import url('../moduleCommon/common.less');
</style>
